<template>
  <div class="app-page">
    <!-- 头 -->
    <div class="app-header">
      <div class="app-title">
        <i :class="$route.meta.icon"></i> {{ $route.meta.title }}
      </div>
    </div>
    <div class="app-page-padding">
      <div class="app-section">
        <ul class="rs-box-shadow">
          <li class="first"></li>
          <li class="second"></li>
          <li class="third"></li>
        </ul>
      </div>
      <div class="app-section">
        <!-- bidirectional data binding（双向数据绑定） -->
        <codemirror v-model="code" :options="cmOptions"></codemirror>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'StyleButton',
  data () {
    return {
      code: `
// 渐变
.rs-box-shadow {
  height: 100px;
  li {
    float: left;
    margin-right: 40px;
    width: 80px;
    height: 80px;
    background: #ccc;
    position: relative;
  }

  /*
  none： 无阴影
  <length>①： 第 1 个长度值定义元素的阴影水平偏移值。正值，阴影出现在元素右侧；负值，则阴影出现在元素左侧
  <length>②： 第 2 个长度值定义元素的阴影垂直偏移值。正值，阴影出现在元素底部；负值，则阴影出现在元素顶部
  <length>③： 第 3 个长度值定义元素的阴影模糊值半径（如果提供了）。该值越大阴影边缘越模糊，若该值为0，阴影边缘不出现模糊。不允许负值
  <length>④： 第 4 个长度值定义元素的阴影外延值（如果提供了）。正值，阴影将向四面扩展；负值，则阴影向里收缩
  <color>： 定义元素阴影的颜色。如果该值未定义，阴影颜色将默认取当前最近的文本颜色
  inset： 定义元素的阴影类型为内阴影。该值为空时，则元素的阴影类型为外阴影
  */
  .first {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.6);
  }
  .second {
    box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, 0.6);
  }
  .third {
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.6) inset;
  }
}
      `,
      cmOptions: {
        // codemirror options
        tabSize: 4,
        mode: 'sass',
        theme: 'darcula',
        lineNumbers: true,
        line: true
        // more codemirror options, 更多 codemirror 的高级配置...
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
// 渐变
.rs-box-shadow {
  height: 100px;
  li {
    float: left;
    margin-right: 40px;
    width: 80px;
    height: 80px;
    background: #ccc;
    position: relative;
  }

  /*
  none： 无阴影
  <length>①： 第 1 个长度值定义元素的阴影水平偏移值。正值，阴影出现在元素右侧；负值，则阴影出现在元素左侧
  <length>②： 第 2 个长度值定义元素的阴影垂直偏移值。正值，阴影出现在元素底部；负值，则阴影出现在元素顶部
  <length>③： 第 3 个长度值定义元素的阴影模糊值半径（如果提供了）。该值越大阴影边缘越模糊，若该值为0，阴影边缘不出现模糊。不允许负值
  <length>④： 第 4 个长度值定义元素的阴影外延值（如果提供了）。正值，阴影将向四面扩展；负值，则阴影向里收缩
  <color>： 定义元素阴影的颜色。如果该值未定义，阴影颜色将默认取当前最近的文本颜色
  inset： 定义元素的阴影类型为内阴影。该值为空时，则元素的阴影类型为外阴影
  */
  .first {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.6);
  }
  .second {
    box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, 0.6);
  }
  .third {
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.6) inset;
  }
}
</style>
